import {Link} from 'react-router-dom';
import React from 'react';
import {RecordItemWithId} from 'hooks/useRecords';
import styled from 'styled-components';
import {List} from 'components/List';
import {useTags} from 'hooks/useTags';

type Props = {
  subRecords: RecordItemWithId[]
}
const Items = styled(List)`
  >li{
    >a{
      margin-left:0;
    }
    .tagName, .amount {
      white-space: nowrap;
    }
    .notes {
      color: #999;
      margin-right: auto;
      margin-left: 12px;
      font-size: 12px;
    }
  }
`;

const RecordsList: React.FC<Props> = (props) => {
  const {findTag} = useTags();

  return (
    <Items>
      {props.subRecords.map((record) => {
        const tag = findTag(record.tagId)
        if(!tag) return undefined
        const name = tag.name
        const category = tag.category
        return (
          <li key={record.id}>
            <Link to={'/statistics/' + record.id}>
              <div className="tagName">
                <span>{name}</span>
              </div>
              {record.notes && <div className="notes oneLine">{record.notes}</div>}
              <div className="amount">{category + ' ¥' + record.amount}</div>
            </Link>
          </li>
        )
      })}
    </Items>
  );
};

export {RecordsList};